<template>
    <div class="weiGameContent">
        <div class="goBack" @click="goBack">
            <van-icon name="arrow-left" size="30" color="#FFFFFF" />
        </div>
        <div class="titleText" v-if="!isSortBtnShow">
            <p>排序中</p>
        </div>
        <div class="sortItem" @click="tableRowDrag(true)" v-if="isSortBtnShow">
            <van-icon name="sort" size="28" color="#FFFFFF" />
        </div>
        <div class="sortItem" @click="tableRowDrag(false)" v-if="!isSortBtnShow">
            <van-icon name="success" size="30" color="#FFFFFF" />
        </div>
        <div class="weiGameBox" id="weiGameBox">
            <div class="weiGameBoxItem" v-for="item in gameList" :key="item.id" @click="goGameDetail(item)">
                <div class="weiGameBoxItemBox" ref="weiGameBoxItemBoxRef">
                    <!-- <SvgIcon width="100px" height="100px" name="work" color="#808080"></SvgIcon> -->
                </div>
                <p class="title">{{ item.title }}</p>
            </div>
        </div>
        <div class="sportsCar" ref="sportsCarElement">
            <SvgIcon width="80px" height="80px" name="sportsCar" color="#fff"></SvgIcon>
        </div>
    </div>
</template>
    
<script setup lang="ts">
import { ref, onMounted, computed, onUnmounted, onBeforeUnmount } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast, showFailToast } from 'vant'
import useSettingStore from '@/store/modules/setting'
import gameStore from '@/store/modules/gameDataList'
const settings = useSettingStore()
const gameStoreList = gameStore()
import Sortable from 'sortablejs'

const sortable = ref<any>(null)


const route = useRoute()
const router = useRouter()

const gameList = ref<any>([])

const isSortBtnShow = ref<boolean>(true)
const weiGameBoxItemBoxRef = ref<any>(null)

const sportsCarElement = ref(null)

// 拖拽
const tableRowDrag = (flag: boolean) => {
    const weiGameBox = document.querySelector('#weiGameBox')
    if (flag) {
        isSortBtnShow.value = false
        showToast('可拖拽图标进行排序')
        if (weiGameBoxItemBoxRef.value) {
            weiGameBoxItemBoxRef.value.forEach(item => {
                item.style.opacity = 0.5
                item.style.border = '1px solid #FFFFFF'
            });
        }
        sortable.value = Sortable.create(weiGameBox, {
            draggable: '.weiGameBoxItem',
            disabled: false,
            onEnd({ newIndex, oldIndex }: any) {
            const currRow = gameList.value.splice(oldIndex, 1)[0]
            gameList.value.splice(newIndex, 0, currRow)
            },
        })
    } else {
        if (sortable.value) {
            isSortBtnShow.value = true
            if (weiGameBoxItemBoxRef.value) {
                weiGameBoxItemBoxRef.value.forEach(item => {
                    item.style.opacity = 0.7
                    item.style.border = 'none'
                })
            }
            sortable.value.options.disabled = true
        }
    }
}

const goBack = () => {
    router.go(-1)
}

const goGameDetail = (item: any) => {
    if (!isSortBtnShow.value) {
        showToast('请先完成排序')
        return
    }
    router.push({
        path: item.path,
    })
}

onMounted(() => {
    settings.handlerLoadingShow(true)
    settings.handlerHeaderShow(false)
    if (gameStoreList.gameDataList && gameStoreList.gameDataList.length) {
        gameList.value = gameStoreList.gameDataList
        settings.handlerLoadingShow(false)
    }
})

onBeforeUnmount(() => {
    settings.handlerHeaderShow(true)
})

onUnmounted(() => {

})

</script>


<style lang="scss" scoped>
.weiGameContent {
    width: 100%;
    height: auto;
    // min-height: calc(100vh - 50px);
    min-height: 100vh;
    position: relative;
    padding: 15px;
    background: url('@/assets/img/gameBg.jpg') no-repeat;
    background-size: 100% 100%;
    .goBack {
        position: absolute;
        top: 15px;
        left: 15px;
    }
    .titleText {
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        color: #FFFFFF;
        font-size: 16px;
    }
    .sortItem {
        position: absolute;
        top: 15px;
        right: 15px;
    }
    .weiGameBox{
        width: 100%;
        margin-top: 60px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        .weiGameBoxItem {
            box-sizing: border-box;
            width: 170px;
            height: 150px;
            margin-bottom: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            .weiGameBoxItemBox {
                width: 150px;
                height: 150px;
                border-radius: 30px;
                background-color: #666;
                opacity: 0.7;
            }
            .title {
                position: absolute;
                // top: 20px;
                top: 50%;
                left: 50%;
                // transform: translateX(-50%);
                transform: translate(-50%, -50%);
                color: #FFFFFF;
                font-size: 16px;
                font-weight: 700;
            }
        }
        .weiGameBoxItem:hover {
            .weiGameBoxItemBox {
                background-color: #000000;
                opacity: 0.6;
            }
        }
    }
    .sportsCar {
        width: 100%;
        position: fixed;
        bottom: -10px;
        left: -10%;
        animation: moveSportsCar 4s infinite; /* 动画持续4秒，无限循环 */
    }
    @keyframes moveSportsCar {
        0% { 
            transform: translateX(0%); 
        }
        // 50% { 
        //     transform: translateX(50%); 
        // }
        100% { 
            transform: translateX(110%); 
        }
    }
}
</style>